<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>故障报修</title>
		<link rel="stylesheet" href="css/muse-ui.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
		<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
		<link rel="stylesheet" href="css/muse-ui-loading.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_951857_sr7zod4vu4.css">
		<script src="js/vue.min.js"></script>
		<script src="js/muse-ui.js"></script>
		<script src="js/muse-ui-loading.js"></script>
		<script src="js/muse-ui-toast.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/utils.js"></script>
		<style>
			.container{
				height:calc(100vh);
				width: 100%;
				padding: 20px;
			}
			.container input {
				color: #ff4081;
			}
			.login-head{
				margin-top: 20%;
				width: 100%;
				text-align: center;
			}
			.icon-denglu{
				color: #fff;
				font-size: 70px;
			}
		</style>
	</head>
	<body>
		<div id="body">
			<mu-appbar style="width: 100%;position: fixed;top: 0;padding-top: 20px;height: auto;" color="secondary">
				<mu-button icon slot="left" @click="util.back()">
					<mu-icon value="arrow_back"></mu-icon>
				</mu-button>
				故障报修
				<mu-button slot="right" @click="util.openWindow('my_repair_record.html')" flat>
					报修记录
				</mu-button>
			</mu-appbar>
			<mu-container style="padding-top: 76px;">
				<mu-select label="燃气表编号:" v-model="meterId" full-width color="secondary">
					<mu-option v-for="item,index in meterList" :key="index" :label="item.no" :value="item.id"></mu-option>
				</mu-select>
				<mu-select label="报修类型:" v-model="type" full-width color="secondary">
					<mu-option label="管道阀门" value="管道阀门"></mu-option>
					<mu-option label="燃气表" value="燃气表"></mu-option>
					<mu-option label="燃气器具" value="燃气器具"></mu-option>
					<mu-option label="燃气拆改" value="燃气拆改"></mu-option>
					<mu-option label="其它报修" value="其它报修"></mu-option>
				</mu-select>
				<mu-text-field v-model="text" label="请描述故障详情" multi-line :rows="3"  label-float full-width color="secondary"></mu-text-field><br/>
				 <mu-button color="secondary" full-width @click="applyRepairMeter" >提交
				 <mu-icon value="arrow_forward" right></mu-icon>
				</mu-button>
			</mu-container>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#body",
			data() {
				return {
					text:"",
					imgArray:[],
					meterList:[],
					meterId:"",
					type:""
				}
			},
			methods: {
				applyRepairMeter(){
					if(!this.meterId){
						util.tip("请选择燃气表编号!")
						return;
					}
					if(!this.type){
						util.tip("请选择报修类型!")
						return;
					}
					if(!this.text){
						util.tip("请输入故障详情!")
						return;
					}
					var params = {
						text:this.text,
						meterId:this.meterId,
						type:this.type,
						date:util.dateFormat('yyyy-MM-dd hh:mm:ss',new Date())
					}
					util.ajax("/api/method/applyRepairMeter", params, data => {
						if(data.code==1){
							this.text = "";
							this.meterId = "";
							this.type = "";
							alert("申请成功,请耐心等待工作人员处理!");
							util.openWindow('my_repair_record.html');
						}else{
							util.tip("请稍后再试!");
						}
					},true)
				},
				getMeterListByUserId() {
					util.ajax("/api/method/getMeterListByUserId", null, data => {
						this.meterList = data.object;
					})
				},
			}
		})
		document.addEventListener('plusready', function() {
			vm.getMeterListByUserId()
		});
	</script>
</html>
